<template>
  <div id="customer">
    <div class="titleTop" style="margin-bottom: 20px;">
      <div class="titleLeft">
        <i class="iconfont icontongyong_dangqianweizhi"></i>
        <span>系统</span>
        <i class="el-icon-arrow-right"></i>
        <span class="activetit">客户列表</span>
      </div>
      <div class="titleRight">
        <el-input placeholder="请输入客户企业名" size="small" v-model="search" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="getdata(1)"></el-button>
        </el-input>
      </div>
    </div>
    <section class="part" style="padding-bottom:12px">
      <configS :configs="configs" @changeItem="changeItem"></configS>
    </section>
    <section class="part">
      <div class="tabledata">
        <el-table :data="tableData" border>
          <el-table-column
            v-for="(item, index) in tableCols"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :formatter="item.formatter"
          ></el-table-column>
          <!-- <el-table-column prop="state"  label="状态" width="180">
            <template slot-scope="scope">
              <el-tag :type="scope.row.color" disable-transitions>{{scope.row.state}}</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="preview(scope.row)" class="view" type="primary" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </section>
  </div>
</template>

<script>
import configS from "../../components/config";
export default {
  name: "customer",
  components: {
    configS
  },
  watch: {},
  data() {
    return {
      search: '',
      configs: [
        // {
        //     title: '项目状态：',
        //     configs: [
        //         {name: '待审核', value: '', isactive: true}, {name: '审核中', value: '', isactive: false},
        //         {name: '打回修改', value: '', isactive: false}, {name: '审核通过', value: '', isactive: false},
        //         {name: '终止', value: '', isactive: false}
        //     ]
        // },
        {
          title: "角色类型：",
          configs: [
            { name: "全部", value: "", isactive: true },
            { name: "供应商", value: "", isactive: false },
            { name: "转让方", value: "", isactive: false },
            { name: "总包方", value: "", isactive: false },
            { name: "核心企业", value: "", isactive: false },
            { name: "确权方", value: "", isactive: false },
            { name: "担保方", value: "", isactive: false }
          ]
        }
      ],
      tableCols: [
        { label: "序号", prop: "id" },
        { label: "客户名称", prop: "companyName" },
        { label: "创建时间", prop: "createTime", formatter: this.dateTable},
        // { label: "中登查询", prop: "zdState", formatter: this.methodsState},
        // { label: "中登更新时间", prop: "regDate",formatter: this.dateTable }
      ],
      tableData: [],
      currentPage: 1,
      total: 10,
      formData: {},
      options: [
        { value: "业务岗", label: "业务岗" },
        { value: "财务岗", label: "财务岗" },
        { value: "运营岗", label: "运营岗" },
        { value: "管理人员", label: "管理人员" }
      ],
      value: "",
      currentPage: 1,
      total: null,
      changeValue: { name: "全部", value: "", isactive: true }
    };
  },
  mounted() {
      this.getdata();
  },
  methods: {
    methodsState: function (val) {
      if(val == 0) {
        return '查验未通过'
      } else if (val == 1) {
        return '查验通过'
      } else {
        return '未查验'
      }
    },
    getdata(parsss) {
      if (parsss) {
        this.currentPage = parsss;
      }
      let obj = {
        companyRole: this.changeValue.name,
        companyName: this.search,
        page: this.currentPage
      };
      this.axios.get("AdminAPI/client/getList", {params: this.filterNoneObj(obj)}).then(({ data }) => {
        this.tableData = data.data;
        this.total = data.pageInfo.total;
      });
    },
    changeItem(val) {
      this.changeValue = val;
      this.currentPage = 1;
      this.getdata();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    },
    preview(row) {
      sessionStorage.setItem('customerId', row.id);
      sessionStorage.setItem('customerName', row.companyName);
      sessionStorage.setItem('customerType', row.roleName);
      this.$router.push({ path: "customerList"});
    },
    selectStatus(val) {
      // console.log(val);
      debugger;
      switch (val.status) {
        case 1:
          val.color = "success";
          break;
        case 2:
          val.color = "warning";
          break;
        case 3:
          val.color = "danger";
          break;
        case 4:
          val.color = "primary";
          break;
      }
    }
  }
};
</script>
<style lang="scss">
#customer {
  .el-select {
    display: block;
  }
  .config {
    background: white;
    padding: 8px;
  }
  .part {
    padding: 0;
    padding-bottom: 30px;
    padding-top: 20px;
    .tabledata {
      width: 100%;

      margin: 20px auto;
      .el-pagination {
        text-align: right;
        margin: 20px 0;
      }
    }
  }
}
.addbtn {
  text-align: right;
  margin: 22px;
  margin-right: 6%;
}
.edit {
  color: #c90303;
}
.activetit {
  color: #1e7cf0;
}
</style>
